<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />

    <script>
      // oppo
      // o  500ms  “o 发送请求”
      // op 先清除上一次开启的延时器 （  “o 发送请求”）     500ms     “op 发送请求”
      // opp 先清除上一次开启的延时器 （  “op 发送请求”）   500ms     “opp 发送请求”

      // const input = document.querySelector('input');

      // // 定义一个全局变量  存储 延时器的id
      // let timeId;

      // input.addEventListener('input', function () {
      //   // 判断 定时器id有没有值
      //   if (timeId) {
      //     clearTimeout(timeId);
      //   }

      //   timeId = setTimeout(() => {
      //     // 存放 真正的业务
      //     console.log(this.value + '  发送请求');
      //   }, 500);
      // });

      // ==========================

      const input = document.querySelector('input');

      // 封装防抖的函数
      function debounce(fn, time) {
        // 定义一个全局变量
        // 不加 声明关键字 就是全局变量

        // 严谨的写法
        // window.timeId=null;
        if (window.timeId) {
          clearTimeout(window.timeId);
        }

        window.timeId = setTimeout(fn, time);
      }

      input.addEventListener('input', function () {
        debounce(() => {
          console.log(this.value + '  发送请求');
        }, 500);
      });
    </script>
  </body>
</html>